<template>
  <div class="album">
    <Tapbar></Tapbar>
    <div class="block">
      <el-carousel height="400px">
        <el-carousel-item v-for="(item, index) in arr1" :key="index">
          <img :src="item" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="box">
      <div class="box-a">
        <h2>数字专辑</h2>
        <p>更多<span>></span></p>
      </div>
      <div class="box-b">
        <div class="box-b-a" v-for="(item, index) in arr2" :key="index">
          <img :src="item.img" alt="" />
          <p>{{ item.parse }}</p>
          <p>{{ item.text }}</p>
          <button>¥30 立即购买</button>
        </div>
      </div>
      <h2>新碟上架</h2>
      <div class="box-b">
        <div class="box-b-a" v-for="(item, index) in arr3" :key="index">
          <img :src="item.img" alt="" />
          <p>{{ item.parse }}</p>
          <p>{{ item.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Tapbar from '../components/Tapbar.vue';
import axios from "axios";
export default {
  name: "Album",
  data() {
    return {
      arr1: null,
      arr2: null,
      arr3: null,
    };
  },
  components: {
    Tapbar,
  },
  methods: {
    async fn() {
      let { data } = await axios.get(
        "https://mock.presstime.cn/mock/61d54a5ad931a30017b06964/"
      );
      this.arr1 = data.data.imgsrc;
      this.arr2 = data.data.aa;
      this.arr3 = data.data.bb;
    },
  },
  created() {
    this.fn();
  },
};
</script>
<style scoped>
.el-carousel__item {
  width: 100vw;
  height: 400px;
}
.el-carousel__item img {
  width: 100%;
  height: 400px;
  margin: 0 auto;
}
.number {
  margin: 100px 0 0 200px;
}
.box {
  padding: 0 200px;
  margin-top: 30px;
}
.box-a {
  display: flex;
  justify-content: space-between;
}
.box-a p {
  margin-top: 30px;
  font-size: 12px;
  color: #c7c7c7;
}
.box-b {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.box-b-a {
  margin-bottom: 40px;
}
.box-b-a img {
  width: 183px;
  height: 183px;
}
.box-b-a p {
  font-size: 12px;
  width: 183px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.box-b-a button {
  font-size: 14px;
  width: 145px;
  height: 40px;
  border: none;
  background: #fff;
  border: 1px solid #000;
  border-radius: 40px;
  text-align: center;
}
</style>